<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      table {
        border-collapse: collapse;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <input type="text" placeholder="请输入你要查询的学生名称" v-model="stuname"/><br/>
      姓名：<input type="text" v-model="uu" placeholder="请输入用户名" /><br />
      性别：<input type="radio" v-model="flag" value="男" />男
      <input type="radio" v-model="flag" value="女" checked="checked" />女<br />
      籍贯：<input type="text" v-model="tt" placeholder="请输入籍贯" /><br />
      年龄：<input type="text" v-model="bb" placeholder="请输入年龄" />
      <button @click="adduser">添加学员</button>
      <table border="1">
        <tr>
          <th>学号</th>
          <th>姓名</th>
          <th>性别</th>
          <th>籍贯</th>
          <th @click="sortList">
            年龄
            <span v-show="showType && !type">↑</span>
            <span v-show="showType && type">↓</span>
          </th>
        </tr>
        <tr v-for="(item,index) in searchStu" :key="item.id">
          <td>{{item.id}}</td>
          <td>{{item.name}}</td>
          <td>{{item.gender}}</td>
          <td>{{item.Native}}</td>
          <td>{{item.age}}</td>
        </tr>

        <tr />
      </table>
    </div>
    <script type="text/javascript" src="./js/vue.js"></script>
    <script type="text/javascript">
      var vm = new Vue({
        el: "#app",
        data: {
          bb: "",
          tt: "",
          flag: "ture",
          uu: "",
          type: true,
          showType: false,
          stuname:'',//将要搜素的学生名称
          list: [
            {
              'id': 1,
              'name': "孙悟空",
              'gender': "男",
              'Native': "花果山",
              'age': "100",
              'pinyin':'sunwukong'

            },
            {
              'id': 2,
             'name': "猪八戒",
              'gender': "男",
              'Native': "高老庄",
             ' age': "200",
             'pinyin':'zhubajie'
            },
            {
              'id': 3,
              'name': "沙和尚",
              'gender': "男",
              'Native': "流沙河",
              'age': "120",
              'pinyin':'shaheshang'
            },
            {
              'id': 4,
              'name': "白龙马",
              'gender': "男",
              'Native': "鹰愁涧",
              'age': "330",
              'pinyin':'bailongma'
            },
          ],
        },
        methods: {
          adduser: function () {
            var myid = this.list.length;
            this.list.push({
              id: myid + 1,
              name: this.uu,
              gender: this.flag,
              Native: this.tt,
              age: this.bb,
            });
            (this.uu = ""), (this.flag = ""), (this.tt = ""), (this.bb = "");
          },
          sortList: function () {
            this.showType = true;
            if (this.type) {
              this.list.sort((a, b) => {
                return a.age - b.age;
              });
            } else {
              this.list.sort((a, b) => {
                return b.age - a.age;
              });
            }
            this.type = !this.type;
          },
        },
        //使用计算属性完成搜素
        computed: {
          searchStu:function(){
            return this.list.filter(value => {
              console.log(value)
              console.log(11111,this.stuname);
              // console.log(value.name.match(this.stuname));
              return value.name.match(this.stuname) || value.pinyin.match(this.stuname)
            }) 
          }
        }
      });
    </script>
  </body>
</html>
